<template>
  <ion-page>
    <ion-content>
      <div class="info">
        <div class="tx">
          <img src="@/assets/images/tx.png" alt="">
        </div>
        <div class="phone">155****3552</div>
        <div class="edit" @click="goPage('/userinfo')">编辑个人资料 <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon></div>
      </div>
      <div class="linehight"> 
        <img src="@/assets/images/bz.png" alt=""> <span>超级会员  助力你的艺考</span> <label @click="goPage('/vip')">立即开通</label>
      </div>
      <div class="box">
        <div class="title">
          <img src="@/assets/images/icon-rl.png" alt=""> <span>我的课程</span> <label  @click="goPage('/myclass')">查看 <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon></label>
        </div>
        <div class="grad">
          <ion-list>
            <ion-item  lines="none">
                <ion-avatar slot="start" class="avatar">
                    <img class="avatar" src="@/assets/images/filedown.png">
                </ion-avatar>
                <ion-label>
                    <p class="filename">统考音表和音乐教育专业是如何分类的</p>
                    <span>张老师</span> <span>I </span> <span> 第九讲</span>
                </ion-label>
            </ion-item>
          </ion-list>
        </div>
      </div>

      <div class="box">
        <div class="grad">
          <ion-list>
            <!-- <ion-item lines="none">
                <ion-avatar slot="start" class="avatar icon">
                    <img class="avatar icon" src="@/assets/images/icon-ce.png">
                </ion-avatar>
                <ion-label>
                  我的测试
                </ion-label>
                <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline" slot="end"></ion-icon>
            </ion-item> -->
            <ion-item lines="none"   @click="goPage('/mycollect')"> 
                <ion-avatar slot="start" class="avatar icon">
                    <img class="avatar icon" src="@/assets/images/icon-mysc.png">
                </ion-avatar>
                <ion-label>
                  收藏
                </ion-label>
                <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline" slot="end"></ion-icon>
            </ion-item>
            <ion-item lines="none" @click="goPage('/myct')">
                <ion-avatar slot="start" class="avatar icon">
                    <img class="avatar icon" src="@/assets/images/icon-ct.png">
                </ion-avatar>
                <ion-label>
                  错题集
                </ion-label>
                <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline" slot="end"></ion-icon>
            </ion-item>
            <ion-item lines="none" @click="goPage('/myset')">
                <ion-avatar slot="start" class="avatar icon">
                    <img class="avatar icon" src="@/assets/images/icon-sz.png">
                </ion-avatar>
                <ion-label>
                  设置
                </ion-label>
                <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline" slot="end"></ion-icon>
            </ion-item>
          </ion-list>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonIcon,  IonList, IonItem, IonAvatar, IonLabel } from '@ionic/vue';
import { reactive, toRefs } from 'vue';
import { chevronForwardOutline } from 'ionicons/icons';
import { useRouter, useRoute } from 'vue-router';
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonIcon, IonList, IonItem, IonAvatar, IonLabel
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({

    })

    const goPage = (path: string) => {
      router.push(
        {
          path
        }
      );
    }
    return {
      ...toRefs(state),
      chevronForwardOutline,
      goPage
    }
  }
}
</script>
<style lang="scss" scoped>
ion-content{
  --background: #f4f4f4;
  --padding-start: 10px;
  --padding-end: 10px;
  .info{
    display: flex;
    margin-top: 20px;
    .tx{
      width: 70px;
      img{
        width: 50px;
      }
    }
    .phone,
    .edit{
      flex: 1;
      font-size: 14px;
      line-height: 50px;
    }
    .edit{
      text-align: right;
      color: #5E6266;
      ion-icon{
        position: relative;
        top: 2px;
      }
    }
  }
  .linehight{
    background: #143268;
    margin-top: 20px;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-size: 14px;
    position: relative;
    img{
      width: 20px;
      vertical-align: middle;
      margin-right: 10px;
    }
    label{
      background-image: linear-gradient(90deg, #FDEFD4 0%, #F0D1A3 100%);
      font-size: 13px;
      color: #143268;
      font-weight: bold;
      padding: 3px 8px;
      position: absolute;
      right: 10px;
      border-radius: 12px;
    }
  }
  .box{
    background: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0px;
    .title{
      position: relative;
      img{
        width: 20px;
        vertical-align: middle;
        margin-right: 10px;
      }
      span{
        font-weight: bold;
        font-size: 16px;
        color: #222222;
      }
      label{
        font-size: 14px;
        position: absolute;
        right: 10px;
        border-radius: 12px;
        color: #5E6266;
        ion-icon{
          position: relative;
          top: 2px;
        }
      }
    }
  }
}

.grad{
  margin-top: 10px;
        ion-icon{
            position: relative;
            top: 2px;
            color: #5E6266;
            font-size: 14px;
        }
        .desc{
            font-size: 13px;
            color: #5E6266;
            overflow: hidden;  //超出隐藏
            text-overflow: ellipsis; //文本超出时显示省略号
            white-space: nowrap; //设置文本不换行
        }
        .filename{
            font-size: 14px;
            color: #333;
            margin-bottom: 0px;
            margin-top: 0px;
        }
        span{
            font-size: 12px;
            color: #939699;
        }
        label{
            font-size: 12px;
            color: #fff;
            background: #CA3032;
            padding: 3px 5px;
            margin-right: 5px;
            border-radius: 3px;
        }
    }
    .icon{
      width: 20px;
      height: 20px;
    }
</style>